<template>
  <div>
    <up-down-layout :header="''" :handleFlag="true" >
      <template slot="query">
        <search-form :componentList="componentList" :formValue="queryParas" @handleFilter="handleFilter"
          @clearParam="clearParam">
        </search-form>
      </template>
      <template slot="table">
        <!-- table表格 -->
        <data-table :toolMenuFlag="true" @onCreateRow="addData" :sourceData="sourceData" :queryParas="queryParas"
          @onEditRow="onEditRow" :menuFlag="false" :IsRight="false" :operateBtnLayout="operateBtnLayout"
          :columns="columns" :deleteApi="api" :api="api" :loadCount="loadCount" :operatWidth="'135px'"
          :reviewFun="reviewFun" :doReviewFun="true"
          >
          <template slot="index">
            <el-table-column align="left" header-align="center" prop="articleTitle" label="标题" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <span class="alink" @click="details(scope.row)">{{ scope.row.articleTitle }}</span>
               </template>
            </el-table-column>
          </template>
          <template scope-slot="button" v-slot:button="scope">
            <!-- publishStatus 1 未提交 3 退回修改，可以修改删除和再次提交流程 scope.row.isTask === '0' -->
            <el-button icon="el-icon-check" class="iconCircle" v-if="(scope.row.Status === '1' || scope.row.Status === '3') && scope.row.isTask === '0'" :title="'提交'" @click="auditSubmit(scope)"></el-button>
          </template>
        </data-table>
      </template>
    </up-down-layout>
    <productEdit :editModel="editModel" :visible.sync="dialogVisible" v-if="dialogVisible" :api="api"
      :form="item" @handSearch="handleFilter" @showPreview="showPreview" @shownewUser="shownewUser"/>
  </div>
</template>
<script>
import BaseManage from '@/pages/baseManage'
import upDownLayout from '@/components/element/upDownLayout'
import searchForm from '@/components/element/searchForm'
import DataTable from '@/components/element/DataTable'
import DialogEdit from '@/components/dialog/DialogEdit'
import productEdit from './productEdit'
import checkUser from '@/pages/productiondataManage/productiondataManage/checkUser'
import newUser from '@/pages/productiondataManage/productiondataManage/newUser'
import datapreview from '@/pages/productiondataManage/productiondataManage/datapreview'
// import { timestampToTime } from '@/filters/index'
import { cmsProductData } from '@/api/business/businessApi'
import { formatDict } from '@/filters/index'
export default {
  // 继承baseManage里的公共方法和定义的属性
  extends: new BaseManage(),
  name: 'productManage',
  components: {
    upDownLayout,
    searchForm,
    DataTable,
    DialogEdit,
    productEdit,
    checkUser,
    datapreview,
    newUser
  },
  data () {
    return {
      componentList: [
      ],
      queryParas: {
        articleTitle: '',
        sendDate: '',
        sendBy: '',
        publishStatus: ''
      },
      // talbe显示的每一项
      columns: [
        {
          prop: 'Status',
          label: 'Status',
          align: 'center',
          width: '100px',
          format: row => { return this.statusColor(formatDict(row.publishStatus, 'publishStatu')) }
        }
      ],
      // 操作列需要显示的按钮
      operateBtnLayout: 'C,D,E',
      userVisible: false,
      userItem: {},
      preVisible: false,
      newUserVisible: false,
      updateUser: {}
    }
  },
  computed: {
    api () {
      return cmsProductData
    }
  },
  methods: {
    // 状态颜色
    statusColor (val) {
      if (val === '已发布') {
        return `<span style="color: #67C23A">${val}</span>`
      } else if (val === '审核中') {
        return `<span style="color: #F5A623">${val}</span>`
      } else if (val === '未提交') {
        return `<span style="color: #979797">${val}</span>`
      } else {
        return val
      }
    }
  }
}
</script>
<style lang="scss">
 .product-drawer .el-drawer__body{
   width: 90%!important;
 }
 .alink{
  color: #409EFF;
  cursor: pointer;
 }
</style>
